import React, { useEffect, useState } from 'react';
import Header from '../../../../component/Serve/Header/Header'
import { useNavigate, useLocation } from 'react-router-dom'
import { Button, Form, Input, Select, DatePicker, Col, message } from 'antd';
import { setServerList, optionlist, getPackName, findStatusName, teamlist, getServerPro, getDoctorList } from '../../../../api/Service'
import './serveEdit.scss';
import dayjs from 'dayjs';
import locale from 'antd/es/date-picker/locale/zh_CN'
interface Props {

}
function ServeEdit(props: Props) {
    const [messageApi, contextHolder] = message.useMessage();
    var navigate = useNavigate()
    var location = useLocation()
    const [form] = Form.useForm()
    const { TextArea } = Input;
    //下拉框数据
    var [organName, setOrganName] = useState([])
    var [packName, setPackName] = useState([])
    var [statusName, setStatusName] = useState([])
    var [dteamName, setDteamName] = useState([])
    var [project, setProject] = useState([])
    //医生列表
    var [doctor, setDoctor] = useState([])
    //挂载期获取回显数据
    useEffect(() => {
        console.log(location.state);
        
        getName()
        location.state.serviceAppointment = dayjs(location.state.serviceAppointment, 'YYYY-MM-DD')
        form.setFieldsValue(location.state)
    }, [])
    //合并数据函数
    var setList = (arr: any) => {
        var newarr = arr.map((item: any) => { return { ...item[0], ...item[1] } })
        return newarr
    }
    //获取下拉框数据
    var getName = async () => {
        var res =await  optionlist()//机构
        if (res.data.code == 200) {
            console.log(res.data.data.map((item: any) => { return { value: item.mechanismId, label: item.mechanismName } }));
            setOrganName(res.data.data.map((item: any) => { return { value: item.mechanismId, label: item.mechanismName } }))
        }
        var res1 = await teamlist()//医生团队  
        if (res1.data.code == 200) {
            setDteamName(res1.data.data.map((item: any) => { return { value: item.teamId, label: item.teamName } }))
        }
        var res2 = await getPackName()//服务包
        setPackName(res2.data)
        var res3 = await findStatusName()//状态
        if (res3.data.code == 200) {
            var res4 = res3.data.data.map((item: any) => { return { value: item.ssId, label: item.ssName } })
            setStatusName(res4)
        }
        var res5 = await getServerPro()//服务项目
        var res6 = setList(res5.data.data)
        if (res.data.code == 200) {
            setProject(res6.map((item: any) => { return { value: item.projectId, label: item.projectName } }))
        }
        var res7 = await getDoctorList()//医生列表
        var res8 = res7.data.data.map((item: any) => { return { value: item.doctorId, label: item.doctorName } })
        setDoctor(res8)
    }
    //表单验证通过提交
    const onFinish = async (values: any) => {
        console.log(values);
        
        values.serviceAppointment = values.serviceAppointment.format('YYYY-MM-DD');
        console.log('Success:', values);
        var res = await setServerList({ ...values })
        if (res.status == 200) {
            messageApi.open({
                type: 'success',
                content: '修改成功',
            });
            setTimeout(() => {
                navigate(-1)
            }, 1000)
        }
    };

    return (
        <div className='serveedit'>
            {contextHolder}
            <div className="main">
                <Header txt='编辑服务信息'></Header>
                <div className="resident">
                    <h4>居民信息</h4>
                    <div className="inputbox">
                        <Form
                            name="basic"
                            labelCol={{ span: 5 }}
                            wrapperCol={{ span: 14 }}
                            layout="inline"
                            onFinish={onFinish}
                            form={form}
                        >

                            <Col span={8}>
                                <Form.Item
                                    label="姓名"
                                    name="residentName"
                                >
                                    <Input disabled />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="身份证号"
                                    name="residentNumber"
                                >
                                    <Input disabled />
                                </Form.Item>
                            </Col>


                            <Col span={8}>
                                <Form.Item
                                    label="性别"
                                    name="residentGender"
                                >
                                    <Select disabled>
                                        <Select.Option value="男">男</Select.Option>
                                        <Select.Option value="女">女</Select.Option>
                                    </Select>
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="出生年月"
                                    name="residentBirth"
                                >
                                    {/* <DatePicker disabled  format="YYYY-MM-DD" /> */}
                                    <Input disabled />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="联系电话"
                                    name="residentPhone"
                                >
                                    <Input disabled />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="现居地"
                                    name="residentNowAddress"
                                >
                                    <Input disabled />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="居民标签"
                                    name="rtId"
                                >
                                    <Select disabled>
                                        <Select.Option value={1}>慢病护理</Select.Option>
                                        <Select.Option value={2}>高血压</Select.Option>
                                        <Select.Option value={3}>高血糖</Select.Option>
                                    </Select>
                                </Form.Item>
                            </Col>

                            <Col span={16}></Col>


                            <Col span={24}><h4>签约信息</h4></Col>
                            <Col span={8}>
                                <Form.Item
                                    label="服务编号"
                                    name="serviceId"
                                >
                                    <Input bordered={false} disabled />
                                </Form.Item>
                            </Col>


                            <Col span={8}>
                                <Form.Item
                                    label="服务机构"
                                    name="mechanismId"
                                    rules={[{ required: true }]}
                                >
                                    <Select options={organName}></Select>
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务团队"
                                    name="teamId"
                                    rules={[{ required: true }]}
                                >
                                    <Select  options={dteamName}></Select>
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务医生"
                                    name="doctorId"
                                    rules={[{ required: true }]}
                                >
                                    <Select options={doctor} >
                                    </Select>
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务包"
                                    name="packageId"
                                    rules={[{ required: true }]}
                                >
                                    <Select  options={packName}></Select>
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务项目"
                                    name="projectName"
                                    rules={[{ required: true }]}
                                >
                                    <Select options={project}>
                                    </Select>
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务地点"
                                    name="servicePlace"
                                    rules={[{ required: true }]}
                                >
                                    <Select>
                                        <Select.Option value={1}>上门服务</Select.Option>
                                        <Select.Option value={2}>机构门诊</Select.Option>
                                    </Select>
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务时间"
                                    name="serviceAppointment"
                                    rules={[{ required: true }]}
                                >
                                    <DatePicker locale={locale} format="YYYY-MM-DD" />
                                </Form.Item>
                            </Col>
                            <Col span={24}></Col>
                            <Col span={8}>
                                <Form.Item
                                    label="服务备注"
                                    name="serviceDesc"
                                >
                                    <TextArea rows={4} />
                                </Form.Item>
                            </Col>

                            <Col span={24}>
                                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                    <Button type="primary" htmlType="submit">保存</Button>
                                    <Button onClick={() => { navigate(-1) }}>返回</Button>
                                </Form.Item>
                            </Col>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default ServeEdit;